<template>
	<div id="app">
		<div class="top">
			<img class="logo" src="./assets/logo.png"> 			
			<img src="./assets/logo-text.png" height="26px" >
		</div>
		<div class="container">
			<aside ref="refNavAside">
				<ul>
					<template v-for="menu in menulist">
						<li class="title">{{menu.name}}</li>
						<template v-for="(item,index) in menu.children">
							<router-link :to="item.url">
								<li :key="index" :class="{'active': item.active}"
									@click="menuClick(item.url)"
									>
									{{item.label}}
								</li>
							</router-link>
						</template>
					</template>
				</ul>
			</aside>
			<section ref="refSectionView">
				<router-view></router-view>
			</section>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
		components: {},
		data() {
			return {
				menulist: [
					{
						name: '基础组件',
						children: [
							{ label:'安装（install） & 引入（import）', url:'/install', active: true},
							{ label:'移动端适配（Adaptive Mobile）', url:'/adaptive', active: false},
							{ label:'颜色风格（Color Style）', url:'/colorStyle', active: false},
							{ label:'按钮（Button）', url:'/buttons', active: false},
							{ label:'图标（Icon）', url:'/icons', active: false},
							{ label:'图片（Image）', url:'/image', active: false},
							{ label:'弹出层（Popup）', url:'/popup', active: false},
							{ label:'加载特效（Loading）', url:'/loading', active: false},
							{ label:'吐司（Toast）', url:'/toast', active: false},
							{ label:'对话框（Dialog）', url:'/dialog', active: false}
						]
					},
					{
						name: '表单输入',
						children: [
							{ label:'单选按钮（Radio）', url:'/radio', active: false},
							{ label:'复选按钮（Checkbox）', url:'/checkbox', active: false},
							{ label:'输入框（Input）', url:'/input', active: false},
							{ label:'上传（Upload）', url:'/upload', active: false},
							{ label:'计数器（Counter)', url:'/stepper', active: false},
							{ label:'滑块（Slider）', url:'/slider', active: false},
							{ label:'开关（Switch）', url:'/switch', active: false},
							{ label:'日期选择器（DatePicker）', url:'/datePicker', active: false},
							{ label:'时间选择器（TimePicker）', url:'/timePicker', active: false},
							{ label:'评分（Rate）', url:'/rate', active: false}
						]
					},
					{
						name: '交互组件',
						children: [
							{ label:'轮播（Swiper）', url:'/swiper', active: false},
							{ label:'下拉选择菜单（Dropdown Menu）', url:'/droplist', active: false},
							{ label:'级联选择器（Cascader）', url:'/cascader', active: false},
						]
					},
					{
						name: '数据展示',
						children: [
							{ label:'表格（Table）', url:'/table', active: false},
							{ label:'分割线（Divider)', url:'/divider', active: false},
							{ label:'徽标（Badge)', url:'/badge', active: false},
						]
					},
				]
			}
		},
		mounted() {
			//左侧添加滚动事件
			this.$refs.refNavAside.addEventListener('mousewheel', function(e){
				// console.log('scrolltop',this.scrollTop);
				if(e.deltaY < 0) {
					this.scrollTop -= 30; 
				} 
				if(e.deltaY > 0) {
					this.scrollTop += 30; 
				}
			})
		},
		methods: {
			menuClick(url){
				this.menulist.forEach((item,idx)=>{
					item.children.forEach(menu=>{
						menu.url == url ? menu.active=true : menu.active=false
					})
				})
			}
		},
		watch:{
		    $route(to,from){
		      // console.log(from.path);//从哪来
		      // console.log(to.path);//到哪去
			  this.menuClick(to.path)
		    }
		}
	}
</script>

<style lang="scss">
	@import './assets/styles/reset';
	@import './assets/styles/common';
	html,body {
		height: 100%;
		overflow: hidden;
	}
	#app {
		height: 100%;
		padding-top: 60px;
		.top {
			display: flex;
			width: 100%;
			height: 60px;
			line-height: 60px;
			box-shadow: 0 0 5px #ccc;
			padding: 0 60px;
			position: fixed;
			left: 0; top: 0;
			background-color: white;
			z-index: 999;
			align-items: center;
			img.logo {
				height: 30px;
				margin-right: 8px;
			}
		}
		> .container {
			width: 1600px;
			display: flex;
			margin: auto;
			height: 100%;
			> aside {
				width: 300px;
				box-shadow: 1px 0 5px #eee;
				height: calc(100% - 60px);
				overflow: hidden;
				font-size: 14px;
				background-color: white;
				ul {
					list-style: none;
					padding: 0;
					li {
						height: 40px;
						line-height: 40px;
						padding-left: 30px;
						color: #666;
						&.title {
							color: #23A3DD;
							font-weight: bold;
							font-size: 20px;
							&:hover {
								cursor: default;
							}
						}
						&:hover {
							cursor: pointer;
						}
						&.active {
							background-color: #EEFFDF;
							color: #3FA358;
							font-weight: bold;
							border-right: 4px solid #3FA358;
						}
					}
				}
			}
			> section {
				width: 1300px;
				display: flex;
				justify-content: center;
				> .container {
					padding: 20px 0;
					width: 100%;
					height: calc(100% - 100px);
					overflow-y: auto;
					display: flex;
					.doc-content {
						padding: 0 30px;
						width: 840px;
						height: fit-content;
					}
					.demo-view {
						display: flex;
						justify-content: center;
						.cellphone {
							overflow: hidden;
							position: relative;
							width: 375px;
							height: 680px;
							border-radius: 10px;
							box-shadow: 0 0 20px rgba(0, 0, 0, .1);
						}
					}
				}
			}
		}
	}
	
	::-webkit-scrollbar{
		width:5px;
		height:5px;
		background-color:#f8f8f8;
		border-radius:8px;
	}
	::-webkit-scrollbar-button{
		display:none;
	}
	::-webkit-scrollbar-track{
		display:none;
	}
	::-webkit-scrollbar-track-piece{
		background-color:#eee;
	}
	::-webkit-scrollbar-thumb {
		background-color:#ddd;
		border-radius:8px;
	}
	::-webkit-scrollbar-corner{
		display:none;
	}
	::-webkit-resizer{
		display:none;
	}
</style>
